<template>
    <basic-container>
        <!-- 字典搜索 -->
          <el-form  :model="searchDictypeForm" class="demo-form-inline" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="5">
                    <el-form-item label-width="100px" label="字典类型名称:">
                        <el-input clearable v-model="searchDictypeForm.dictTypeName" placeholder="字典类型名称"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="5">
                    <el-form-item label-width="100px"  label="字典类型编码:">
                        <el-input clearable v-model="searchDictypeForm.dictTypeCode" placeholder="字典类型编码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-button @click="dictTypeSearch" type="primary" class="el-icon-search-class" size="small" icon="el-icon-search" >查询</el-button>
                    <el-button @click="dictTypeReset" size="small" icon="el-icon-delete">清空</el-button>
                </el-col>
            </el-row>
        </el-form>
         <!-- 添加按钮 -->
         <el-row>
            <el-col :span="2" v-has="'sys_dept_add'">
                <el-button
                    @click="dialogVisible=true"
                    type="primary"
                    size="mini"
                    icon="el-icon-plus">
                    新增
                </el-button>
            </el-col>
        </el-row>
        <!-- 展示表格 -->
        <el-table 
        :data="dictData" 
        ref="multipleTable"
        max-height="550"
        row-key="menuId"
        style="width:100%" 
        border
        v-loading = "isLoading"
        element-loading-text = "加载中，请稍后..."
        element-loading-background = "rgba(255, 255, 255, .5)"
        element-loading-spinner = "el-icon-loading"
        >
           <el-table-column
            prop="dictTypeName"
            label="字典类型名称"
            width="300">
            </el-table-column>
            <el-table-column
            prop="dictTypeCode"
            label="字典类型编码"
            width="300">
            </el-table-column>
            <el-table-column
            prop="dictTypeDesc"
            label="字典类型描述"
            width="300">
            </el-table-column>
            <el-table-column
            prop="dictTypeCode"
            label="是否系统字典"
            width="300">
            <template v-slot="{row}">
            <el-tag v-if="row.isSystemDict" type="success">✔</el-tag>
            <el-tag v-else type="danger">❌</el-tag>
            </template>
            </el-table-column>
            <el-table-column
            align="center"
            fixed="right"
            prop="dictTypeDesc"
            label="操作"
            width="300">
            <template v-slot="{row}">
            <el-button @click="checkDictDetail(row.dictTypeId)" type="text" size="small" v-has="'sys_dept_view'"><i class="el-icon-view"></i>查看</el-button>
            <el-button @click="editDict(row.dictTypeId,'edit')" type="text" size="small" v-has="'sys_dept_edit'"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button @click="delDict(row)" type="text" size="small" v-has="'sys_dept_delete'" v-if="row.dictTypeId !='0'"><i class="el-icon-delete"></i>删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-row :gutter="20" class="page-list">
            <el-col :span="10" :offset="12">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="dictPage.pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog :title="dictType=='edit'?'编辑':'新增'" :visible.sync="dialogVisible" width="50%" @close="btnCancel">
            <el-form :model="formData" :rules="rules" ref="formData">
                <el-form-item prop="dictTypeName" label="字典类型名称" label-width="120px">
                    <el-input v-model="formData.dictTypeName" clearable  placeholder="请输入字典类型名称"></el-input>
                </el-form-item>
                <el-form-item prop="dictTypeCode" label="字典类型编码" label-width="120px">
                    <el-input :disabled="dictType=='edit'?true:false" v-model="formData.dictTypeCode" clearable  placeholder="请输入字典类型编码"></el-input>
                </el-form-item>
                <el-form-item prop="dictTypeDesc" label="字典类型描述" label-width="120px">
                    <el-input v-model="formData.dictTypeDesc" :autosize="{ minRows: 3, maxRows: 6}" type="textarea" clearable  placeholder="请输入字典类型描述"></el-input>
                </el-form-item>
                <el-form-item label="是否系统字典" label-width="120px">
                    <el-select v-model="formData.isSystemDict" placeholder="请选择">
                        <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="btnCancel">取消</el-button>
                <el-button type="primary" @click="btnOk">确定</el-button>
            </span>
        </el-dialog>
        
        <el-dialog class="tetee" title="查看" :visible.sync="dialogShow" width="50%" >
            <!-- 内层 -->
            <el-dialog
            @close="dictCancel"
            width="30%"
            :title="checkDictType=='edit'?'编辑':'新增'"
            :visible.sync="innerVisible"
            append-to-body>
            <el-form 
            :model="checkDictDetailForm" 
            :rules="checkDictDetailRules" 
            ref="checkDictDetailForm" 
            class="demo-form-inline" 
            label-width="80px">
                <el-form-item prop="dictName" label="字典名称:" label-width="100px">
                    <el-input v-model="checkDictDetailForm.dictName"  clearable  placeholder="请输入字典名称"></el-input>
                </el-form-item>
                <el-form-item prop="dictKey" label="字典key:" label-width="100px">
                    <el-input :disabled="checkDictType=='edit'?true:false" v-model="checkDictDetailForm.dictKey"  clearable  placeholder="请输入字典key"></el-input>
                </el-form-item>
                <el-form-item prop="dictValue" label="字典value:" label-width="100px">
                    <el-input v-model="checkDictDetailForm.dictValue"  clearable  placeholder="请输入字典value"></el-input>
                </el-form-item>
                <el-form-item prop="dictDesc" label="字典描述:" label-width="100px">
                    <el-input :autosize="{ minRows: 3, maxRows: 6}" type="textarea" v-model="checkDictDetailForm.dictDesc"  clearable  placeholder="请输入字典key"></el-input>
                </el-form-item>
                <el-form-item label="字典排序:" label-width="100px">
                    <el-input-number v-model="checkDictDetailForm.dictSort" controls-position="right"  :min="0" :max="10000"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dictCancel">取消</el-button>
                    <el-button type="primary" @click="dictOk">确定</el-button>
            </span>
            </el-dialog>
            <el-form :model="searchDictForm" class="demo-form-inline" label-width="80px">
            <el-row :gutter="30">
                <el-col :span="8">
                    <el-form-item label-width="80px" label="字典名称:">
                        <el-input v-model="searchDictForm.dictName" clearable placeholder="字典名称"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="8">
                    <el-form-item label-width="80px"  label="字典key:">
                        <el-input v-model="searchDictForm.dictKey" clearable placeholder="字典key"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button @click="dictSearch" type="primary" class="el-icon-search-class" size="small" icon="el-icon-search" >查询</el-button>
                    <el-button @click="dictReset" size="small" icon="el-icon-delete">清空</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row :span="8" >
                <el-button @click="innerVisible=true" type="primary" size="mini" icon="el-icon-plus">
                    新增
                </el-button>
        </el-row>
        <el-table :data="checkDictData" style="width:100%" border>
            <el-table-column prop="dictName" label="字典名称" width="200">
            </el-table-column>
            <el-table-column prop="dictKey" label="字典key" width="200">
            </el-table-column>
            <el-table-column prop="dictValue" label="字典value" width="200">
            </el-table-column>
            <el-table-column prop="dictDesc" label="字典描述" width="200">
            </el-table-column>
            <el-table-column prop="dictSort" label="排序" width="200">
            </el-table-column>
            <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="300">
            <template v-slot="{row}">
            <el-button @click="editCheckDict(row.dictId,'edit')" type="text" size="small" v-has="'sys_dict_edit'"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button @click="delCheckDict(row)" type="text" size="small" v-has="'dict'" v-if="row.dictTypeId !='0'"><i class="el-icon-delete"></i>删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        </el-dialog>
    </basic-container>
</template>

<script>
import {listDictType,addDictType,updateDictType,delDictType} from '@/api/system/dictType'
import {listDict,addDict,updateDict,delDict} from '@/api/system/dict'
export default {
    data() {
        return {
           currentPage:1,
           isLoading:true,
           checkDictType:'',
           dictId:'',
           dictTypeId:'',
           innerVisible:false,
           dialogShow:false,
           dictType:'',
           searchDictypeForm: {
               dictTypeName:'',
               dictTypeCode:'',
           },
           searchDictForm:{
               dictName:'',
               dictKey:''
           },
           dictData:[],
           checkDictForm: [], //查询
           checkDictData:[], //初始化数据
           checkDictDetailForm: {
                dictName:'',
                dictKey:'',
                dictValue:'',
                dictDesc:'',
                dictSort:'',
           }, //新增明细
           dictPage:{ //字典分页
               pageNo:1,
               pageSize:10
           },
           checkDictPage:{ //查看明细分页
               pageNo:1,
               pageSize:10
           },
           total:'',
           dialogVisible:false,
           options:[{
               value:1,
               label:'是'
           },
           {
               value:0,
               label:'否'
           },],
           formData:{
               dictTypeName:'',
               dictTypeCode:'',
               dictTypeDesc:'',
               isSystemDict:0
           },
           rules:{
               dictTypeName:[
                   {
                   required:true,message:'请输入字典名称',trigger: 'blur'
               }
               ],
               dictTypeCode:[
                   {
                   required:true,message:'请输入字典编码',trigger:'blur'
               }
               ],
               dictTypeDesc:[
                   {
                   required:true,message:'请输入字典描述',trigger:'blur'
               }
               ],
           },
           checkDictDetailRules:{
                dictName:[
                    {required:true,message:'请输入字典名称',trigger:'blur'}
                ],
                dictKey:[
                    {required:true,message:'请输入字典key',trigger:'blur'}
                ],
                dictValue:[
                    {required:true,message:'请输入字典value',trigger:'blur'}
                ],
                dictDesc:[
                    {required:true,message:'请输入字典描述',trigger:'blur'}
                ],
           }

        }
    },
     created(){
         this.getListDictType()
    },
    methods:{
       async getListDictType(data){
            const {obj}=await listDictType({...this.dictPage,...data})
            this.dictData=obj.list
            this.total=obj.total
            this.isLoading=false
        },
        async getListDict(id){ 
            const {obj}=await listDict(id)
            this.checkDictData=obj.list
        },
        async btnOk(){
            await this.$refs.formData.validate()
            if(this.dictType=='edit'){
                await updateDictType(this.formData)
                this.$message.success('编辑数据字典成功') 

            }else{
                await addDictType(this.formData)
                this.$message.success('新增数据字典成功') 
            }
            this.getListDictType()
            this.dialogVisible=false

        },
        async btnCancel(){
            this.formData={
               dictTypeName:'',
               dictTypeCode:'',
               dictTypeDesc:'',
               isSystemDict:0
            }
            await this.$refs.formData.resetFields()
            this.dictType=''
            this.dialogVisible=false
        },
        editDict(id,type){
            this.dictType=type
            this.dialogVisible=true
            const editData=this.dictData.find(item=>item.dictTypeId===id)
            this.formData.dictTypeName=editData.dictTypeName
            this.formData.dictTypeCode=editData.dictTypeCode
            this.formData.dictTypeDesc=editData.dictTypeDesc
            this.formData.isSystemDict=editData.isSystemDict
            this.formData.dictTypeId=id
        },
        async delDict(row){
          try {
             await this.$confirm(`确定要（删除）【${row.dictTypeName}】吗?`, '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
             })
             await delDictType(row.dictTypeId)
             this.$message.success('删除成功')
             this.getListDictType()
          } catch (error) {
              console.log(error);
          }
        },
        async checkDictDetail(id){
            this.dialogShow=true
            this.dictTypeId=id
            this.getListDict(id)
        },
        async dictOk(){
            await this.$refs.checkDictDetailForm.validate()
            if(this.checkDictType=='edit'){
                await updateDict(
                    {...this.checkDictDetailForm,dictTypeId:this.dictTypeId,
                    dictId:this.dictId})
                this.$message.success('编辑字典明细成功')

            }else{
             await addDict(
                {...this.checkDictDetailForm,dictTypeId:this.dictTypeId})
            this.$message.success('新增字典明细成功')   
            }
            this.getListDict(this.dictTypeId)
            this.innerVisible=false

        },
        async dictCancel(){
            this.checkDictDetailForm={
                dictName:'',
                dictKey:'',
                dictValue:'',
                dictDesc:'',
                dictSort:'',
           }
           await this.$refs.checkDictDetailForm.resetFields()
           this.dictId=''
           this.checkDictType=''
           this.innerVisible=false
        },
        editCheckDict(id,type){
            this.dictId=id
            this.checkDictType=type
            this.innerVisible=true
            const findDict=this.checkDictData.find(item=>item.dictId===id)
            this.checkDictDetailForm.dictName=findDict.dictName
            this.checkDictDetailForm.dictKey=findDict.dictKey
            this.checkDictDetailForm.dictValue=findDict.dictValue
            this.checkDictDetailForm.dictDesc=findDict.dictDesc
            this.checkDictDetailForm.dictSort=findDict.dictSort

        },
        async delCheckDict(row){
           try {
             await this.$confirm(`确定要（删除）【${row.dictName}】吗?`, '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
             })
            await delDict(row.dictId)
            this.$message.success('删除成功')
            this.getListDict(this.dictTypeId)
           } catch (error) {
               console.log(error);
           }
        },
        async dictTypeSearch(){
            this.currentPage=1
            this.dictPage.pageNo=1
            this.getListDictType(this.searchDictypeForm)
        },
        dictTypeReset(){
            this.searchDictypeForm={
               dictTypeName:'',
               dictTypeCode:'',
            },
            this.currentPage=1
            this.dictPage.pageNo=1,//字典分页
            this.dictPage={ //字典分页
               pageNo:1,
               pageSize:10
           }

            this.getListDictType()
        },
        async dictSearch(){
            const {obj}=await listDict(this.dictTypeId,this.searchDictForm)
            this.checkDictData=obj.list
        },
        dictReset(){
            this.searchDictForm={
               dictName:'',
               dictKey:''
           }
           this.getListDict(this.dictTypeId)
        },
        //每页展示几条数据回调
        handleSizeChange(val){
          this.dictPage.pageSize=val
          this.getListDictType(this.searchDictypeForm)

        },
        //点击的时候触发
        handleCurrentChange(val){
          this.dictPage.pageNo=val
          this.getListDictType(this.searchDictypeForm)
        }

    }
}
</script>

<style lang="scss" scoped>

.line{
    text-align: center;
}
.end-text .el-form-item__label{
     text-align: center;
}

.row-text{
    margin-bottom: 10px !important;
}

#tenant-select .el-select{
	width: 100%;
}
.keyword-input{
	padding: 5px 2px;
	height:35px;
	width:94%;
}
.keyword-input input{
	height:100%;
	width:100%;
}
.dept-link .el-col{
	margin-top:-15px;
    margin-bottom:-15px;
}
/deep/ .el-input-number{
  width: 100%;
}
/deep/ .select-tenant {
	width: 100%;
}

</style>
